<template>
  <div class="seven_content myStyle">
    <div class="content_top">
      <StrokeTitle2 title="环比变化" class="float margin" style="width: 27.3%">
        <div class="flex_center" slot="select">
          <!-- <ElementRadio v-model="model" :isButton="true" :options="[  {
            value: 'lastMonth', label: '上月' },{value: 'quarter',label: '当季'}]" @change="radioChange1" /> -->
          <el-select v-model="top1Form.ggname" placeholder="请选择" size="mini" style="width: 80px" @change="kanbantop">
            <el-option v-for="item in selectList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="flex_center Echarts" style="height: 100%" slot="content">
          <div class="calculagraph_left">
            <Ring class="ring" :data="{ allRate: top1.a1 }" subtext="" titleTop="43%" />
            <div class="label" style="margin-top: 1px">实际值</div>
          </div>
          <div class="calculagraph_right">
            <StrokeItem rightWidth="60%" leftWidth="40%" title="上期实际值" :number="top1.mom" />
            <StrokeItem6 rightWidth="60%" leftWidth="40%" style="margin-top: 8px" title="环比变化"
              :number="(top1.permom * 100).toFixed(0) + '%'" unit="%" />
          </div>
          <!-- <PieImg5 legendLeft="53%" legendLabel="个" cirTop="0.3" :isTitle="true" length="5" itemWidth="0.85" cirLeft="0.9" style="height: 100%" :data="top1" :img="require('@/assets/images/echarts/7pingpei.png')" /> -->
          <!-- <MoreRing legendLeft="58%" label="" length="5" labelLength="1" airLeft="28" imgLeft="1.1" itemWidth="1.1" imgWidth="1.2" :img="require('@/assets/images/echarts/zhanbi.png')" :data="top1" /> -->
        </div>
      </StrokeTitle2>
      <StrokeTitle2 title="近半年消耗率趋势" class="float margin" style="width: 35.3%">
        <div class="flex_center" slot="select">
          <ElementSelect ref="psNameSelect" :isSelected="true" @select="selectList2" :isAll="true"
            :isClearable="false" />
        </div>
        <div class="flex_center Echarts" style="height: 100%" slot="content">
          <NormalLine legendLeft="28%" :isTitle="true" length="5" itemWidth="0.85" cirLeft="0.2" :data="top2" />
        </div>
      </StrokeTitle2>

      <StrokeTitle2 title="原物料消耗率分析" class="float margin" style="width: 34.4%">
        <div class="flex_center" slot="select">
          <!-- <ElementDateSelect type="monthrange" @dateSelect="dateSelect" :isSectione="true"/> -->
          <el-date-picker :clearable="false" v-model="bottom1Form.dyjsrq" size="mini" @input="dateSelect($event)"
            type="month" value-format="yyyy-MM" placeholder="选择月">
          </el-date-picker>
        </div>
        <MoreColBar :data="bottom1" gridLeft="10%" gridRight="5%" :xAxisLine="true" :yAxisLine="true" slot="content"
          :formData="{ end: bottom1Form.dyjsrq, start: bottom1Form.dyksrq }" />
      </StrokeTitle2>
    </div>
    <div class="content_center">
      <StrokeTitle2 title="同比变化" class="float margin" style="width: 27.3%">
        <div class="flex_center" slot="select">
          <ElementRadio v-model="model" :isButton="true" :options="[
              {
                value: 'lastMonth',
                label: '上月',
              },
              { value: 'quarter', label: '当季' },
            ]" @change="radioChange4" />
          <el-select v-model="center1Form.ggname" placeholder="请选择" size="mini" style="width: 80px"
            @change="kanbancenter1">
            <el-option v-for="item in selectList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="flex_center Echarts" style="height: 100%" slot="content">
          <div class="calculagraph_left">
            <Ring class="ring" :data="{ allRate: center1.a1 }" subtext="" titleTop="43%" />
            <div class="label" style="margin-top: 1px">实际值</div>
          </div>
          <div class="calculagraph_right">
            <StrokeItem rightWidth="60%" leftWidth="40%" title="上期实际值" :number="center1.yoy" />
            <StrokeItem6 rightWidth="60%" leftWidth="40%" style="margin-top: 8px" title="同比变化"
              :number="(center1.peryoy * 100).toFixed(0) + '%'" unit="%" />
          </div>
          <!-- <PieImg5 legendLeft="28%" legendLabel="个" cirTop="0.3" :isTitle="true" length="5" itemWidth="0.85" cirLeft="0.2" style="height: 100%" :data="center1" :img="require('@/assets/images/echarts/7pingpei.png')" /> -->
        </div>
      </StrokeTitle2>
      <StrokeTitle2 title="当年十二月实际值变化趋势" class="float margin" style="width: 70.7%">
        <div class="flex_center" slot="select">
          <span style="margin-right: 10px">当前均值={{ bottomLabel}}</span>
          <el-select v-model="center2Form.ggname" placeholder="请选择" size="mini" style="width: 220px"
            @change="kanbancenter2">
            <el-option v-for="item in selectList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="flex_center Echarts" slot="content" style="height: 100%">
          <!-- <ELine2 :data="bottom" label="实际内控：" /> -->
          <NormalLine2 legendLeft="28%" :isTitle="true" length="5" itemWidth="0.85" cirLeft="0.2" :data="bottom" />
        </div>
      </StrokeTitle2>
    </div>
    <div class="content_bottom">
      <StrokeTitle2 title="生产效率" class="float margin" style="width: 49%">
        <div class="flex_center" slot="select">
          <ElementRadio v-model="model" :isButton="true" :options="[
              {
                value: 'lastMonth',
                label: '上月',
              },
              { value: 'quarter', label: '当季' },
            ]" @change="radioChange3" />
          <ElementSelect ref="psNameSelect" :isSelected="true" @select="selectList3" :isClearable="false"
            width="80px" />
          <div class="all_box" style="margin-left: 5px" @click="kanbanrightAll">
            全部
          </div>
        </div>
        <div class="flex_center Echarts" style="height: 100%" slot="content">
          <XRow barWidth="6" :data="top3" xUnit=" " barRight="19%" barLeft="10%" />
        </div>
      </StrokeTitle2>
      <StrokeTitle2 title="十二月生产效率分析" class="float margin" style="width: 49%">
        <div class="flex_center" slot="select">
          <span slot="select" style="margin-right: 10px">当前均值={{ bottom2Label }}</span>
          <el-select v-model="bottom2Form.yearStep" @change="kanbanrightBrokenLine" placeholder="请选择" size="mini" style="margin-right: 10px;width:160px">
            <el-option label="今年" :value="0">
            </el-option>
            <el-option label="去年" :value="-1">
            </el-option>
            <el-option label="前年" :value="-2">
            </el-option>
          </el-select>
          <!-- <ElementSelect ref="psNameSelect" :isSelected="true" @select="selectList5" :isAll="true" :isClearable="false"
            width="220px" style="margin-right: 10px;"/> -->
          <ElementSelect ref="psNameSelect" :isSelected="true" @select="selectList4" :isAll="true" :isClearable="false"
            width="160px" />
        </div>
        <div class="flex_center Echarts" style="height: 100%" slot="content">
          <ELine :data="bottom2" />
        </div>
      </StrokeTitle2>
    </div>
    <AllDialog ref="AllDialog" />
  </div>
</template>

<script>
  import {
    Kanbantop,
    Kanbantop2,
    Kanbanright,
    Kanbanywl,
    LastTenYears,
    KanbanrightBrokenLine,
  } from "@/api/echarts/seven/materialsSupplies";
  import StrokeTitle2 from "@/components/myComponents/stroke/title2.vue";
  import StrokeItem5 from "@/components/myComponents/stroke/item5.vue";
  import StrokeItem6 from "@/components/myComponents/stroke/item6.vue";
  import StrokeItem7 from "@/components/myComponents/stroke/item7.vue";
  import NormalLine from "@/components/echarts/line/normal.vue";
  import PieImg5 from "@/components/echarts/pie/img5.vue";
  import { list, listPost } from "@/api/dialog/index";
  import MoreDirection3 from "@/components/echarts/bar/moreDirection3.vue";
  import ELine2 from "@/components/echarts/line/index2.vue";
  import NormalLine2 from "@/components/echarts/line/normal2.vue";
  export default {
    components: {
      NormalLine,
      PieImg5,
      StrokeTitle2,
      MoreDirection3,
      ELine2,
      NormalLine2,
      StrokeItem5,
      StrokeItem7,
      StrokeItem6,
    },
    data() {
      return {
        model: "lastMonth",
        selectList: [
          { value: "瓶坯", label: "瓶坯" },
          { value: "瓶盖", label: "瓶盖" },
          { value: "商标", label: "商标" },
        ],
        //环比变化
        top1: {
          a1: 0, //实际数据
          mom: 0, //环比上期
          yoy: 0, //同比上期
          permom: 0, //环比数据
          peryoy: 0, //同比数据
        },
        top1Form: {
          jsrq: this.$getLastMonth("e"),
          ksrq: this.$getLastMonth("s"),
          ggname: "瓶坯",
        },
        //近半年消耗率趋势
        top2: {},
        top2Form: {
          val: 1,
          ggname: "全部",
        },
        //生产效率
        top3: [],
        top3Form: {
          jsrq: this.$getLastMonth("e"),
          ksrq: this.$getLastMonth("s"),
          val: 1,
          ggname: "",
          all: "",
        },
        //同比变化
        center1: {
          a1: 0, //实际数据
          mom: 0, //环比上期
          yoy: 0, //同比上期
          permom: 0, //环比数据
          peryoy: 0, //同比数据
        },
        center1Form: {
          jsrq: this.$getLastMonth("e"),
          ksrq: this.$getLastMonth("s"),
          ggname: "瓶坯",
        },
        //瓶盖-各生产品项占比
        center2: [],
        center2Form: {
          ggname: "瓶坯",
        },

        //当年十二月实际值变化趋势
        bottom: { xData: [], yData1: [], yData2: [] },
        bottomLabel: 0,
        //原物料消耗率分析
        bottom1Form: {
          dyksrq: this.$getLastMonth("s"),
          dyjsrq: this.$getLastMonth("e"),
        },
        bottom1: {
          xData: ["瓶坯", "瓶盖", "商标"],
          yData1: [],
          yData2: [],
          yData3: [],
          yData4: [],
        },
        //十二月生产效率分析
        bottom2Form: {
          ggname: "全部",
          val: "1",
          yearStep :0,
        },
        bottom2: [],
        bottom2Label: 0,
        color: ["blue", "orange", "green", "pink"],
      };
    },
    mounted() {
      this.kanbantop(); //环比变化
      this.kanbancenter1(); //同比变化
      // this.getList();
      this.kanbancenter2(); //当年十二月实际值变化趋势
      this.kanbantop2(); //近半年消耗率趋势
      this.kanbanright(); //生产效率
      this.kanbanywl(); //原物料消耗率分析
      this.kanbanrightBrokenLine(); //十二月生产效率分析
    },
    methods: {
      //获取商品列表
      getList() {
        list(
          "/basic/productInfo/listSelect",
          { pageNum: 1, pageSize: 10 },
          "GET"
        ).then((res) => {
          this.bottom2Form.ggname = res.rows[0].name;
          this.kanbanrightBrokenLine(); //十二月生产效率分析
        });
      },
      dateSelect(e) {
        this.bottom1Form.dyksrq = this.$serveGetMonth(e, "s");
        this.bottom1Form.dyjsrq = this.$serveGetMonth(e, "e");
        this.kanbanywl();
      },
      //环比变化时间切换
      radioChange1(e) {
        this.top1Form.ksrq = e[0];
        this.top1Form.jsrq = e[1];
        this.kanbantop();
      },
      //环比变化选择器切换
      selectList1(e) {
        this.top1Form.ggname = e;
        if (e == "全部") {
          this.top1Form.val = 1;
        } else {
          this.top1Form.val = 0;
        }
        this.kanbantop();
      },
      //环比变化
      kanbantop() {
        Kanbantop(this.top1Form).then((res) => {
          if (res.code == 200) {
            this.top1 = res.data;
          }
        });
      },
      //近半年消耗率趋势选择器切换
      selectList2(e) {
        this.top2Form.ggname = e;
        if (e == "全部") {
          this.top2Form.val = 1;
        } else {
          this.top2Form.val = 0;
        }
        this.kanbantop2();
      },
      //近半年消耗率趋势
      kanbantop2() {
        Kanbantop2(this.top2Form).then((res) => {
          this.top2 = res.data;
        });
      },
      //生产效率时间切换
      radioChange3(e) {
        this.top3Form.ksrq = e[0];
        this.top3Form.jsrq = e[1];
        this.kanbanright();
      },
      //生产效率选择器切换
      selectList3(e) {
        this.top3Form.ggname = e;
        if (e == "全部") {
          this.top3Form.val = 1;
        } else {
          this.top3Form.val = 0;
        }
        this.kanbanright();
      },
      //生产效率
      kanbanright() {
        Kanbanright(this.top3Form).then((res) => {
          if (res.code == 200) {
            this.top3 = res.data;
          }
        });
      },
      //生产效率-全部
      kanbanrightAll() {
        let obj = JSON.parse(JSON.stringify(this.top3Form));
        obj.all = "111";
        Kanbanright(obj).then((res) => {
          if (res.code == 200) {
            this.$refs.AllDialog.unit = "";
            this.$refs.AllDialog.right.unit = "";
            this.$refs.AllDialog.tableData.data = res.data;
          }
          this.$refs.AllDialog.dialogTableVisible = true;
        });
      },
      //同比变化时间切换
      radioChange4(e) {
        this.center1Form.ksrq = e[0];
        this.center1Form.jsrq = e[1];
        this.kanbancenter1();
      },
      //同比变化
      kanbancenter1() {
        Kanbantop(this.center1Form).then((res) => {
          if (res.code == 200) {
            this.center1 = res.data;
          }
        });
      },
      //当年十二月实际值变化趋势
      kanbancenter2() {
        LastTenYears(this.center2Form).then((res) => {
          if (res.code == 200) {
            // this.bottomLabel=0
            let number = 0;
            let temp = 0;
            this.bottom = { xData: [], yData1: [], yData2: [] };
            for (let item of res.data) {
              this.bottom.xData.push(item.month);
              this.bottom.yData1.push(item.nkbz);
              this.bottom.yData2.push(item.tjy);
              // let obj = {};
              // obj.name = item.month;

              // obj.value = item.tjy;
              // obj.value2 = item.nkbz;
              // this.bottom.push(obj);
              if (item.tjy) {
                number += Number(item.tjy);
                temp++;
              }
            }
            if (res.data.length != 0 && temp) {
              this.bottomLabel = (number / temp).toFixed(2);
            }
            // this.bottomLabel=111
          }
        });
      },
      //原物料消耗率分析
      kanbanywl() {
        this.bottom1 = {
          xData: ["瓶坯", "瓶盖", "商标"],
          yData1: [],
          yData2: [],
          yData3: [],
          yData4: [],
        };
        Kanbanywl(this.bottom1Form).then((res) => {
          // console.log(res);
          if (res.code == 200) {
            this.bottom1 = {
              xData: ["瓶坯", "瓶盖", "商标"],
              yData1: [
                Number(res.data[0].pp),
                Number(res.data[0].pg),
                Number(res.data[0].sb),
              ],
              yData2: [
                Number(res.data[1].pp),
                Number(res.data[1].pg),
                Number(res.data[1].sb),
              ],
              yData3: [
                Number(res.data[2].pp),
                Number(res.data[2].pg),
                Number(res.data[2].sb),
              ],
              // yData4: [
              //   Number(res.data[3].pp),
              //   Number(res.data[3].pg),
              //   Number(res.data[3].sb),
              // ],
            };
          }
        });
      },
      //十二月生产效率分析选择器切换
      selectList4(e) {
        this.bottom2Form.ggname = e;
        if (e == "全部") {
          this.bottom2Form.val = 1;
        } else {
          this.bottom2Form.val = 0;
        }
        this.kanbanrightBrokenLine();
      },
      //十二月生产效率分析
      kanbanrightBrokenLine() {
        KanbanrightBrokenLine(this.bottom2Form).then((res) => {
          if (res.code == 200) {
            let number = 0;
            let temp = 0;
            this.bottom2 = res.data;
            for (let item of this.bottom2) {
              number += Number(item.sl);
              item.name = item.month + "月";
              item.value = item.sl;
              if (item.sl != 0) {
                temp++;
              }
            }
            if (this.bottom2.length != 0) {
              console.log(number / temp)
              this.bottom2Label = (number / temp).toFixed(2);
            }
            if (number == 0 || temp == 0) {
              this.bottom2Label = 0;
            }
          }
        });
      },
      radioChange() { },
    },
  };
</script>

<style lang="scss" scoped>
  .seven_content {
    z-index: 10;
    background: #093b76;
    width: 100%;
    height: calc(100vh - 190px);
    overflow: auto;

    // overflow: hidden;
    .content_top,
    .content_bottom,
    .content_center {
      //   background: res;
      width: 100%;
      // height: 34.8%;
      height: 30.8%;

      .calculagraph_right,
      .calculagraph_left {
        width: 40%;
        height: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        position: relative;
        float: left;
        margin-left: -8%;
      }

      .calculagraph_right {
        width: 44%;
        align-items: flex-start;
        justify-content: center;
        height: 95%;
        margin-left: 0%;
      }
    }

    .content_top {
      height: 30.8%;
    }

    .content_bottom {
      // height: 28.9%;
      height: 31.5%;
    }

    .cntj_box {
      width: 100%;
      height: 100%;
      padding: 15px;

      .cntj_item {
        width: 24.5%;
        background: linear-gradient(180deg,
            rgba(44, 119, 187, 0.5) 0%,
            rgba(18, 81, 141, 0.5) 100%);
        border: 1px solid #2489ee71;
        height: 100%;
        padding: 15px;

        nav {
          font-size: 20px;
          background: rgba(35, 107, 173, 0.7);
          height: 28%;
          width: 100%;
          text-align: center;
        }

        .cntj_item_content {
          width: 100%;
          height: 66%;

          margin-top: 2%;

          .cntj_item_content_item {
            width: 49%;
            background-image: url("~@/assets/images/echarts/zhuangshi.png");
            background-size: 100% 100%;
            height: 100%;
            background-color: rgba(35, 107, 173, 0.7);

            .number {
              font-size: 37px;
            }

            .unit {
              font-size: 17px;
              margin-top: 3%;
              color: #ffffff;
            }
          }
        }
      }
    }

    .Echarts {
      height: calc(100% - 50px);
    }

    .center_echarts {
      height: 180px;
    }
  }

  .ring {
    width: 128px;
    height: 128px
  }
</style>
